<template>
  <div class="m20">
    <div>{{ dialog }}</div>
    <el-button @click="dialog.default = true">默认弹窗</el-button>
    <el-button @click="dialog.form = true">表单弹窗</el-button>
  </div>
  
  <!-- 默认弹窗 -->
  <el-dialog v-model="dialog.default" class="custom-dialog" draggable width="1200px">
    <template #header >新增</template>
    <div class="bg-blue" style="height: 900px">内容</div>
    <template #footer>
      <el-button class="btn-main w100" @click="dialog.default = false">确 定</el-button>
      <el-button class="btn-default w100 mr15" @click="dialog.default = false">取 消</el-button>
    </template>
  </el-dialog>
  
  <!-- 表单弹窗 -->
  <el-dialog v-model="dialog.form" class="custom-dialog" draggable width="1200px">
    <template #header >编辑</template>
    <el-form ref="formRef1" :model="form" :rules="rules" label-width="140px">
      <div class="p20">
        <el-form-item label="字段:" class="pct100">
          <el-input v-model="form.input1" class="pct100 unit unit-add" placeholder="请输入" clearable></el-input>
        </el-form-item>
        <div class="form-inline">
          <el-form-item label="字段:" prop="input2" class="pct50">
            <el-input v-model="form.input2" class="pct100" placeholder="请输入" clearable></el-input>
          </el-form-item>
          <el-form-item label="字段:" prop="input3" class="pct50">
            <el-select v-model="form.input3" class="pct100" placeholder="请输入" clearable>
              <el-option v-for="item in 5" :key="item" :value="item" :label="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="字段:" prop="input3" class="pct33">
            <el-select v-model="form.input3" class="pct100" placeholder="请输入" clearable>
              <el-option v-for="item in 5" :key="item" :value="item" :label="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="字段:" prop="input3" class="pct33">
            <el-select v-model="form.input3" class="pct100" placeholder="请输入" clearable>
              <el-option v-for="item in 5" :key="item" :value="item" :label="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="字段:" prop="input3" class="pct33">
            <el-select v-model="form.input3" class="pct100" placeholder="请输入" clearable>
              <el-option v-for="item in 5" :key="item" :value="item" :label="item"></el-option>
            </el-select>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <template #footer>
      <el-button class="btn-main w100" @click="submit('formRef1')">确 定</el-button>
      <el-button class="btn-default w100 mr15" @click="dialog.form = false">取 消</el-button>
    </template>
  </el-dialog>
  
  <div class="m20">
    网格树组件: {{ gridCode }}
    <GridTree v-model="gridCode" @nodeClick="nodeClick" />
  </div>
  <div class="m20">
    按钮:
    <el-link class="mr10" :underline="false"><el-icon><ElIconCirclePlus /></el-icon> 新增</el-link>
    <el-link class="mr10" :underline="false"><el-icon><ElIconDelete /></el-icon> 删除</el-link>
    <el-link class="mr10" :underline="false"><el-icon><ElIconUpload /></el-icon> 导入</el-link>
    <el-link class="mr10" :underline="false"><el-icon><ElIconDownload /></el-icon> 导出</el-link>
    <el-link class="mr10" :underline="false"><el-icon><ElIconDownload /></el-icon> 下载</el-link>
  </div>
</template>

<script setup>
// 引入 GridTree 组件
import GridTree from '@/components/grid-tree/GridTree.vue'
import { reactive, ref, useTemplateRef } from 'vue'

// 弹窗
const dialog = reactive({
  default: false,
  form: false
})

// 表单
const form = ref({
  input1: '',
  input2: '',
  input3: ''
})
const rules = reactive({
  input1: [{ required: true, message: '请输入', trigger: 'blur' }],
  input2: [{ required: true, message: '请输入', trigger: 'blur' }],
  input3: [{ required: true, message: '请选择', trigger: 'change' }]
})
const formRef1 = ref()
const submit = async () => {
  try {
    await formRef1.value.validate()
    console.log('submit!', form.value)
    dialog.form = false
  } catch (error) {
    console.log('error submit!', error)
  }
}

// 网格树
const gridCode = ref('GZ')
function nodeClick(node) {
  console.log(node.id);
}


</script>

<style>

</style>